<template>
	<view class="box">
		<u-navbar @leftClick="leftClick" :autoBack="true" :safeAreaInsetTop="true">
			<view slot="center" class="subsection">
				<u-subsection mode="subsection" :list="list" :current="curNow" @change="sectionChange"></u-subsection>
			</view>
		</u-navbar>
		<u-alert :title="title" type="warning" style="margin-top: 80rpx;"></u-alert>

		<template v-if="curNow == 0">
			<view class="substance" v-for="(item, index) in roomListType" :key="index">
				<u--text :text="item.itemName" :bold="true"></u--text>
				<view class="upload">
					<view :class="[activeMeadiaSrc ==  item.imgList[indeximg] ? 'active_bg' : 'show_test']"
						v-for="(itemimg, indeximg) in item.imgList" :key="indeximg"
						style="float: left; width: 160rpx; height: 160rpx; position: relative; overflow: hidden;">
						<u-icon name="close-circle-fill" @click="clearimg(itemimg, indeximg, index)" size="28"
							style="position: absolute; z-index: 33; top: 0%; right: 0%; transform: translate(26%, -26%)"></u-icon>
						<image :showLoading="true" :src="itemimg" mode="" style="width: 100%; height: 100%;"
							@click="sebigImg(index,indeximg,'', item.imgList[indeximg])"
							@longtap="seebigImg(item.imgList,indeximg )">
						</image>
					</view>
					<u-upload @afterRead="afterRead($event,index)" name="1" multiple :maxCount="18"></u-upload>
				</view>
			</view>
		</template>
		<template v-if="curNow == 1">
			<view class="substance" v-for="(item, index) in roomListTypeViddeo" :key="index">
				<u--text :text="item.itemName" :bold="true"></u--text>
				<view class="upload">
					<view :class="[activeMeadiaSrc == item.videoList[indexvideo] ? 'active_bg' : 'show_test']"
						v-for="(itemvideo, indexvideo) in item.videoList" :key="itemvideo"
						style="float: left; width: 160rpx; height: 160rpx; position: relative; "
						@longtap="seeBigVideo(itemvideo)">
						 
							<u-icon name="close-circle-fill" @click="clearimg(itemvideo, indexvideo, index, 'video')"
														size="28"
														style="position: absolute; z-index: 33; top: -12%; right: -12%; transform: translate(26%, -26%)"></u-icon>
						<video :src="itemvideo" @click="sebigImg(index,indexvideo,'video', item.videoList[indexvideo])"
							style="width: 100%; margin: auto; height: 100%;" :opacity="0.7"
							@longtap="seeBigVideo(itemvideo)"></video>
						<!-- {{ itemvideo }} -->
						<!-- {{ itemvideo }} -->
						<!-- <view v-html="itemvideo" > </view> -->
					</view>
					<u-upload accept='video' @afterRead="afterRead($event,index, 'video')" name="1" multiple
						:maxCount="5"></u-upload>
				</view>

			</view>
		</template>
		<view class="button_box">
			<view class="button">
				<u-button type="primary" text="设置主图" :plain="true" @click="setMainImage"></u-button>
			</view>
			<view class="button">
				<u-button type="primary" text="完成" @click="comfirmModel"></u-button>
			</view>
		</view>
		<u-overlay :show="videoIsShow" @click="videoIsShow = false">
			<view class=""
				style="height: 100vh; width: 100vw;display: flex; justify-content: center; align-content: center;">
				<!-- <video :src="videoSrc" style="width: 100%; margin: auto;" :opacity="0.7"></video> -->
				<!-- {{ videoSrc }} -->
				<view v-html="videoSrc" style="height: 50%; width: 50%; "> </view>
			</view>
		</u-overlay>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import Upload from "@/components/Upload/index.vue";
	import {
		baseURL
	} from "@/request/index.js";
	import {
		addMedia
	} from "@/api/house/index.js"
	export default {
		onLoad(option) {
			this.infoId = option.id
			let mediaVoList = JSON.parse(option.mediaVoList);
			console.log(mediaVoList);
			if (mediaVoList.length != 0) {
				mediaVoList.map((item, index) => {
					this.roomListType.map((imgItem, imgIndex) => {
						if (item.isPoster == '1') {
							this.activeMeadiaSrc = item.mediaUrl
						}
						if (item.mediaLabel == imgItem.itemName && item.mediaType == 0) {
							imgItem.imgList.push(item.mediaUrl)
						}
					})
					this.roomListTypeViddeo.map((imgItem, imgIndex) => {
						if (item.mediaLabel == imgItem.itemName && item.mediaType == 1) {
							 
							imgItem.videoList.push(item.mediaUrl)
						}
					})
				})
			}
			console.log(this.roomListTypeViddeo);
		},
		data() {
			return {
				activeImg: 0,
				infoId: 0,
				videoIsShow: false,
				videoSrc: "",
				curNow: 0,
				disabled: true,
				activeMeadiaSrc: "",
				list: ['照片', '视频'],
				title: '提醒:请保证上传照片的真实性，平台会对照片真实性进行检查，一经查实虚假照片您的房源照片将会被下架。资源长按可预览哦~',
				fileList1: [],
				active: '',
				// roomListType:['卧室', '客厅', '卫生间', '厨房', '阳台'],
				roomListType: [{
						itemName: "卧室",
						imgList: [],
						id: 1,
					},
					{
						itemName: "客厅",
						imgList: [],
						id: 1,
					},
					{
						itemName: "卫生间",
						imgList: [],
						id: 1,
					},
					{
						itemName: "厨房",
						imgList: [],
						id: 1,
					},
					{
						itemName: "阳台",
						imgList: [],
						id: 1,
					},
				],
				roomListTypeViddeo: [{
						itemName: "卧室",
						videoList: []
					},
					{
						itemName: "客厅",
						videoList: []
					},
					{
						itemName: "卫生间",
						videoList: []
					},
					{
						itemName: "厨房",
						videoList: []
					},
					{
						itemName: "阳台",
						videoList: []
					},
				],

			}
		},
		methods: {

			async comfirmModel() {
				var imgTypeList = [];
				this.roomListType.map((item, index) => {
					if (item.imgList.length > 0) {
						item.imgList.map((itemChildren, indexChildren) => {
							var mediaObj = {
								mediaLabel: item.itemName,
								mediaType: '0',
								mediaUrl: itemChildren,
								isPoster: this.activeMeadiaSrc == itemChildren ? '1' : '0'
							}
							imgTypeList.push(mediaObj)
						})
					}
				})
				this.roomListTypeViddeo.map((item, index) => {
					if (item.videoList.length > 0) {
						item.videoList.map((itemChildren, indexChildren) => {
							var mediaObj = {
								mediaLabel: item.itemName,
								mediaType: '1',
								mediaUrl: itemChildren,
								
								isPoster: this.activeMeadiaSrc == itemChildren ? '1' : '0'
							}
							imgTypeList.push(mediaObj)
						})
					}
				})
				if (imgTypeList.length == 0) {
					this.$refs.uToast.show({
						message: '请上传资源',
						type: 'error'
					})
				} else {
					console.log(imgTypeList);
					if (imgTypeList.filter((item, index) => item.isPoster == '1').length == 0) return this.$refs.uToast
						.show({
							message: '请设置主图',
							type: 'error'
						})

					const res = await addMedia({
						theirId: this.infoId,
						theirType: 0,
						mediaItems: imgTypeList
					})

					if (res.data.code != 200) return this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'success'
					});

					setTimeout(() => {
						// uni.navigateBack(-2)
						uni.redirectTo({
							url: '/pages/house/availabilityDetail?id=' + this.infoId
						})
					}, 1000)
				}
			},

			setMainImage() {
				if (this.activeMeadiaSrc == '') return this.$refs.uToast.show({
					message: '请选择主图',
					type: 'error'
				});

				try {
					this.roomListType.map((item, index) => {
						if (item.imgList.indexOf(this.activeMeadiaSrc) != -1) {
							this.$refs.uToast.show({
								message: '设置成功',
								type: 'success'
							});
							throw new Error('xxxx')
						} else {
							this.$refs.uToast.show({
								message: '请选择主图',
								type: 'error'
							});
						}

					})
				} catch (e) {

				}

			},

			seebigImg(imgArr, img) {
				uni.previewImage({
					urls: imgArr,
					current: img
				});
			},
			seeBigVideo(src) {
				this.videoSrc = src;
				this.videoIsShow = true
			},

			sebigImg(index, indeximg, type, itemimg) {
				if (type == 'video') return this.$refs.uToast.show({
					message: '视频不能作为首图哦~',
					type: 'error'
				});
				// console.log(itemimg);	
				this.activeMeadiaSrc = itemimg
			},
			clearimg(itemimg, indeximg, index, type) {
				if (type == 'video') {
					this.roomListTypeViddeo[index].videoList = this.roomListTypeViddeo[index].videoList.filter((item,
						index) => {
						return itemimg != item
					})
				} else {
					this.roomListType[index].imgList = this.roomListType[index].imgList.filter((item, index) => {
						return itemimg != item
					})
				}
			},
			leftClick() {
				uni.navigateBack(-1)
			},
			sectionChange(index) {
				console.log(index);
				this.curNow = index;
			},

			// 新增图片
			async afterRead(event, index, type) {
				if (event.file[0].size > 200000000) {
					return uni.showToast({
						title: '不得超过200MB',
						icon: 'none'
					})
				}
				let lists = [].concat(event.file)
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					if (result.code != 200) return this.$refs.uToast.show({
						message: '上传失败',
						type: 'error'
					})

					if (type == 'video') {
						this.roomListTypeViddeo[index].videoList.push(result.data);
					} else {
						this.roomListType[index].imgList.push(result.data);
					}
					// if (result.code != 200) {
					// 	uni.showToast({
					// 		title: '上传失败',
					// 		icon: 'error'
					// 	})
					// } else {
					// 	this.roomListType[index].imgList.push(result.data);
					// }
					this.show = false

				}
			},

			uploadFilePromise(url) {
				let loadding = uni.showLoading({
					title: '上传中',
					mask: true
				})
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseURL + '/face/fileup',
						filePath: url,
						name: 'file',
						success: (res) => {
							resolve(JSON.parse(res.data))
							uni.hideLoading(loadding)
						},
						fail: () => {
							uni.hideLoading(loadding)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.active_bg {
		position: relative;
	}

	.show_test {
		position: relative;
	}

	.show_test::after {
		content: '已展示';
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		padding: 10rpx 15rpx;
		font-size: 20rpx;
		background-color: #5a9de6;
		color: #fff;
	}

	.active_bg::after {
		content: '首图';
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		padding: 10rpx 15rpx;
		font-size: 20rpx;
		background-color: #5a9de6;
		color: #fff;
	}

	.box {
		padding-top: 88rpx;
		padding-bottom: 80rpx;

		.subsection {
			width: 40%;
		}

		.substance {
			padding: 30rpx;

			.upload {
				padding: 30rpx;
			}
		}

		.button_box {
			@include flexBetween;
			background-color: #fff;
			z-index: 99;
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 20rpx;

			.button {
				width: 100%;
				margin: 0 10rpx;
			}
		}
	}
</style>